<template>
  <div class="content">
    <!--搜索框-->
    <div class="search-form">
      <div class="search">
        <img
          @click="back"
          style="width: 20px; height: 20px; margin-left: 12px"
          src="../../assets/icon/back2.png"
        />
        <div style="flex: 4">
          <van-search
            v-model.trim="keyword"
            show-action
            shape="round"
            placeholder="请输入搜索关键词"
            @search="onSearch"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </div>
      </div>
    </div>
    <!--书籍列表-->
    <div v-if="isShowBookList" class="bookList-box">
      <div @click="goBookInfo(item.id)" class="bookList-item" v-for="(item, index) in bookList" :key="index">
        <img style="width: 55px; height: 93px" :src="item.pic" />
        <span style="margin-left: 20px">{{ item.bookname }}</span>
      </div>
      <div v-if="bookList.length == 0">很抱歉未能找到结果</div>
    </div>
    
    <div v-else class="keyword-box">
      <!--搜索历史-->
      <div class="keyword-block" v-if="oldKeywordList.length > 0">
        <div class="keyword-list-header">
          <span style="font-weight: bolder">搜索历史</span>
          <img
            @click="oldDelete"
            style="width: 20px; height: 20px"
            src="../../assets/icon/delect.png"
          />
        </div>
        <div class="keyword">
          <div
            class="item"
            v-for="(item, index) in oldKeywordList"
            :key="index"
          >
            <van-tag color="#F5F5F5" round text-color="gray" size="large">{{
              item
            }}</van-tag>
          </div>
        </div>
      </div>
      <!--top10热门搜索-->
      <div class="keyword-block">
        <div class="keyword-list-header">
          <span style="font-weight: bolder">本周热搜榜</span>
          <img
            style="width: 20px; height: 20px"
            src="../../assets/icon/hotsearch.png"
          />
        </div>
        <div class="keyword-hot-bang">
          <div
            class="item-hot"
            v-for="(item, index) in hotKeywordList"
            :key="index"
            @click="goBookInfo(item.id)"
          >
            <span v-if="index == 0">
              <span
                ><span style="color: rgb(255, 1, 1)">{{ index + 1 }}</span>
                {{ item.bookname }}</span
              >
            </span>
            <span v-if="index == 1">
              <span
                ><span style="color: rgb(255, 94, 1)">{{ index + 1 }}</span>
                {{ item.bookname }}</span
              >
            </span>
            <span v-if="index == 2">
              <span
                ><span style="color: rgb(255, 196, 1)">{{ index + 1 }}</span>
                {{ item.bookname }}</span
              >
            </span>
            <span v-if="index >= 3">
              <span
                ><span>{{ index + 1 }}</span> {{ item.bookname }}</span
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bookrequst from "@/api/book";
import { Search, Tag, Dialog, Lazyload } from "vant";
import Vue from "vue";

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
// 节流函数
const delay = (function () {
  let timer = 0;
  return function (callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
export default {
  components: {
    [Search.name]: Search,
    [Tag.name]: Tag,
    [Lazyload.name]: Lazyload,
  },
  data() {
    return {
      defaultKeyword: "完美世界", //默认关键字
      keyword: "",
      bookList: [],
      isShowBookList: false,
      oldKeywordList: [],
      hotKeywordList: [],
    };
  },
  created(){
    this.getRankBook()
  },
  methods: {
    onSearch() {
      this.oldKeywordList.unshift(this.keyword);
    },
    //清除历史记录
    oldDelete() {
      Dialog.confirm({
        title: "确定清除历史记录",
      })
        .then(() => {
          this.oldKeywordList = [];

          console.log("清除历史记录");
        })
        .catch(() => {});
    },
    back() {
      if (window.history.length <= 1) {
        this.$router.push("/");
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    doSearch(key) {
      if (!key) {
        this.bookList = [];
        this.isShowBookList = false;
        return;
      }
      this.isShowBookList = true;
      bookrequst.bookByName(key).then((res) => {
        this.bookList = res.data.data;
      });
    },
    goBookInfo(id) {
      this.$router.push({
        path:"/bookinfo",
        query: {
          bookId: id,
        },
      });
    },
    //获取热门书籍
   getRankBook() {
      bookrequst.bookRank().then(res=>{
        this.hotKeywordList = res.data.data.slice(0, 10)
      })
    }
  },
  watch: {
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次keyword方法（去搜索）
    keyword() {
      delay(() => {
        this.doSearch(this.keyword);
      }, 300);
    },
  },
};
</script>

<style  scoped>
.keyword-box {
  margin: 14px;
}
.keyword-list-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-self: center;
}
.keyword {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
}
.item {
  margin: 7px;
  color: gray;
}
.keyword-block {
  margin-top: 14px;
}
.keyword-hot-bang {
  display: flex;
  width: 98%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-hot {
  flex: 1;
  width: 49%;
  max-width: 49%;
  min-width: 49%;
  display: flex;
  margin-top: 14px;
}
.search {
  display: flex;
  align-items: center;
  width: 100%;
}
.bookList-item {
  display: flex;
  align-items: center;
  margin: 25px;
}
</style>